<template>
  <div class="bg_color_white">
    <div class="container">
      <div class="content">
        <div class="content_title">{{ lableConfig.task }}描述</div>
        <rich-text
          class="part_description"
          :nodes="
            taskInfo.describe
              ? taskInfo.describe
              : '暂无' + lableConfig.task + '描述'
          "
        >
        </rich-text>
        <div>
          <van-tabs
            swipeable
            sticky
            animated
            color="#ff4d03"
            title-active-color="#ff4d03"
            title-inactive-color="#b0b0b0"
            :active="active"
          >
            <van-tab
              v-for="(item, index) in taskInfo.taskContents"
              :key="index"
              :title="lableConfig.content + (index + 1)"
            >
              <div class="step_item">
                <mp-html
                  class="steps"
                  v-if="item.description"
                  :content="item.description"
                />
                <!--                <rich-text-->
                <!--                  class="steps"-->
                <!--                  v-if="item.description"-->
                <!--                  :nodes="item.description"-->
                <!--                >-->
                <!--                </rich-text>-->

                <div
                  class="step_title"
                  v-if="item.ccCourseTaskFileList.length > 0"
                >
                  教学课件：
                </div>
                <div class="courseware_list">
                  <div
                    class="courseware_list_item"
                    @click="openFile(item2.fileName, item2.fileUrl, item2.type)"
                    v-for="(item2, index2) in item.ccCourseTaskFileList"
                    :key="index2"
                  >
                    <img
                      class="pdf_img"
                      :src="returnIcon(item2.fileUrl, item2.type)"
                      alt=""
                    />
                    <div class="pdf_name overtxt">{{ item2.fileName }}</div>
                  </div>
                </div>
              </div>
            </van-tab>
          </van-tabs>
        </div>
        <van-popup
          :show="showPopup"
          round
          position="bottom"
          custom-style="height: 40%"
          @close="onClose"
        >
          <div class="popup_content bg_color rela">
            <div class="flex_bt">
              <div
                @click.stop="finishShowDialog = true"
                class="content_item bg_purple"
                v-if="
                  !taskInfo.offlineExamId &&
                  !taskInfo.examId &&
                  taskInfo.studyStatus == 1
                "
              >
                学习完成
              </div>
              <div
                class="content_item bg_purple"
                v-if="taskInfo.studyStatus == 2"
              >
                已学习
              </div>
              <div
                class="content_item bg_brown"
                v-if="taskInfo.practiceId"
                @click.stop="handleExam('practice')"
              >
                习题练习
              </div>
              <div
                class="content_item bg_blue"
                v-if="
                  taskInfo.examId &&
                  (taskInfo.onlineExamStatus == 0 ||
                    taskInfo.onlineExamStatus == 2)
                "
                @click.stop="handleExam('onlineExam')"
              >
                考核
              </div>
              <div
                class="content_item bg_blue"
                v-if="
                  taskInfo.examId &&
                  (taskInfo.onlineExamStatus == 1 ||
                    taskInfo.onlineExamStatus == 3 ||
                    taskInfo.onlineExamStatus == -1)
                "
                @click.stop="handleExam('onlineExam')"
              >
                考核答案
              </div>
              <div
                class="content_item bg_blue_dark"
                v-if="
                  taskInfo.offlineExamId &&
                  (taskInfo.offlineExamStatus == 0 ||
                    taskInfo.offlineExamStatus == 2)
                "
                @click.stop="handleExam('offlineExam')"
              >
                线下考核
              </div>
              <div
                class="content_item bg_blue_dark"
                v-if="
                  taskInfo.offlineExamId &&
                  (taskInfo.offlineExamStatus == 1 ||
                    taskInfo.offlineExamStatus == 3 ||
                    taskInfo.offlineExamStatus == -1)
                "
                @click.stop="handleExam('offlineExam')"
              >
                线下考核答案
              </div>
            </div>
            <div class="btn_center abso">
              <div @click="showPopup = false" class="btn_close">
                <van-icon class="cross" name="cross" />
              </div>
            </div>
          </div>
        </van-popup>
        <!--   占位符     -->
        <div
          style="
            width: 100%;
            height: calc(100rpx + env(safe-area-inset-bottom));
          "
        ></div>
        <!-- @touchmove="handleTouchMove" -->
        <div @click.stop="showPopup = true" class="fixed" v-show="!showPopup">
          <div class="btn_bottom">
            <van-icon class="arrow_up color_little" name="arrow-up" />
            <van-icon class="arrow_up color_green" name="arrow-up" />
            <text class="btn_text">练习考核</text>
          </div>
        </div>
        <!-- <div class="asked">
          <van-icon class="comment_circle" name="comment-circle-o" />
          <text class="asked_text">提问</text>
        </div> -->
      </div>
    </div>
    <!-- 视频预览 -->
    <videoview :url="videoUrl" :show.sync="videoOpen"></videoview>
    <!-- 是否完成学习 -->
    <vDialog
      use-slot
      :showDialog.sync="finishShowDialog"
      contentText="是否确认完成学习"
      @confirm="finishDialogConfirm"
    >
    </vDialog>
  </div>
</template>

<script>
import vDialog from "@/components/v-dialog";
import videoview from "@/components/videoview";
import {
  level1_Info,
  level2_Info,
  taskComplete,
  recordStudyTime,
} from "@/common/api/chapter.js";
import { isImageFile, isVideoFile, returnIcon } from "@/common/utils.js";
import uniCalendarItemVue from "../../uni_modules/uni-calendar/components/uni-calendar/uni-calendar-item.vue";
export default {
  components: { videoview, vDialog },
  name: "partName",
  data() {
    return {
      returnIcon: function (url, type) {
        return returnIcon(url, type);
      },
      active: 0,
      showPopup: false,
      taskId: "",
      orderCourseId: "",
      courseStuId: "",
      taskInfo: "",
      videoUrl: "",
      videoOpen: false,
      startTime: "",
      finishShowDialog: false,
      lableConfig: "",
    };
  },
  async onHide() {
    if (this.taskInfo.studyStatus !== 2 && this.startTime) {
      console.log("记录学习时间");
      await recordStudyTime(
        this.taskInfo.taskId,
        this.courseStuId,
        (Date.parse(new Date()) - this.startTime) / 1000
      );
      this.startTime = null;
    }
  },
  async onUnload() {
    if (this.taskInfo.studyStatus !== 2 && this.startTime) {
      console.log("记录学习时间");
      await recordStudyTime(
        this.taskInfo.taskId,
        this.courseStuId,
        (Date.parse(new Date()) - this.startTime) / 1000
      );
      this.startTime = null;
    }
  },
  onShow() {
    this.lableConfig = getApp().globalData.$lableConfig;
    // 获取任务信息
    this.getTaskInfo();
  },
  onLoad(options) {
    this.taskId = options.taskId;
    this.orderCourseId = options.orderCourseId;
    this.courseStuId = options.courseStuId;
  },
  methods: {
    /* 获取任务信息 */
    async getTaskInfo() {
      uni.showLoading({ mask: true, title: "加载中" });
      let res = await level2_Info(this.taskId, this.courseStuId);
      uni.setNavigationBarTitle({
        title: res.data.taskName,
      });
      this.taskInfo = res.data;
      if (this.taskInfo.studyStatus !== 2) {
        this.startTime = Date.parse(new Date());
      }
      uni.hideLoading();
    },
    async finishDialogConfirm() {
      uni.showLoading({ mask: true, title: "加载中" });
      await taskComplete(
        this.taskInfo.taskId,
        this.courseStuId,
        (Date.parse(new Date()) - this.startTime) / 1000
      );
      this.startTime = null;
      uni.showToast({
        title: "完成学习",
        icon: "success",
        duration: 1500,
      });
      this.showPopup = false;
      this.taskInfo.studyStatus = 2;
    },
    handleExam(type) {
      this.showPopup = false;
      // 考核
      if (type == "onlineExam") {
        // 未开始
        if (this.taskInfo.onlineExamStatus == 0) {
          uni.navigateTo({
            url: `/pages/selectiCourse/startExam?examId=${this.taskInfo.examId}&type=${type}&orderCourseId=${this.orderCourseId}&courseStuId=${this.courseStuId}&taskId=${this.taskInfo.taskId}&taskName=${this.taskInfo.taskName}`,
          });
        }
        // 进行中
        else if (this.taskInfo.onlineExamStatus == 2) {
          uni.navigateTo({
            url: `/pages/selectiCourse/exam?type=${type}&id=${this.taskInfo.examId}&taskId=${this.taskInfo.taskId}&orderCourseId=${this.orderCourseId}&courseStuId=${this.courseStuId}&status=inProgress&taskName=${this.taskInfo.taskName}`,
          });
        }
        // 查看答案
        else {
          console.log(this.taskInfo.taskName);
          uni.navigateTo({
            url: `/pages/selectiCourse/examResult?type=${type}&paperId=${this.taskInfo.onlinePaperId}&id=${this.taskInfo.examId}&taskId=${this.taskInfo.taskId}&orderCourseId=${this.orderCourseId}&courseStuId=${this.courseStuId}&taskName=${this.taskInfo.taskName}`,
          });
        }
      }
      // 练习
      else {
        uni.navigateTo({
          url: `/pages/selectiCourse/startExam?examId=${this.taskInfo.practiceId}&type=${type}&orderCourseId=${this.orderCourseId}&courseStuId=${this.courseStuId}&taskId=${this.taskInfo.taskId}&taskName=${this.taskInfo.taskName}`,
        });
      }
    },
    handleTouchMove(event) {
      console.log(event);
      const touch = event.touches[0];
      const startY = touch.clientY;
      const moveY = event.changedTouches[0].clientY;
      console.log(startY, moveY);
      if (moveY - startY < -50) {
        console.log("向上滑动超过50px时触发函数");
        // 向上滑动超过50px时触发函数
        this.showPopup = true;
      }
    },
    openFile(fileName, url, type) {
      if (type == "0") {
        uni.navigateTo({
          url: `/pages/webview?url=${url}`,
          fail: function (err) {
            console.log("跳转失败", err);
          },
        });
      } else {
        if (isImageFile(fileName)) {
          uni.previewImage({
            current: "", // 当前显示图片的链接，可选项
            urls: [url], // 需要预览的图片链接列表
            success: function () {
              console.log("预览图片成功");
            },
            fail: function (error) {
              console.log("预览图片失败", error);
            },
          });
        } else if (isVideoFile(fileName)) {
          this.videoOpen = true;
          this.videoUrl = url;
        } else {
          if (fileName.split(".").pop().toLowerCase() == "wps") {
            let jumpUrl = `https://vip.ow365.cn/?i=32269&ssl=1&furl= + ${url}`;
            console.log(jumpUrl);
            uni.navigateTo({
              url: `/pages/webview?url=${jumpUrl}`,
              fail: function (err) {
                console.log("跳转失败", err);
              },
            });
          } else {
            uni.downloadFile({
              url: url, // 文件的网络地址
              success: function (res) {
                if (res.statusCode === 200) {
                  var filePath = res.tempFilePath; // 下载后的文件临时路径
                  // 打开文件
                  uni.openDocument({
                    filePath: filePath,
                    success: function () {
                      console.log("打开文件成功");
                    },
                    fail: function (err) {
                      console.log("打开文件失败", err);
                    },
                  });
                } else {
                  console.log("下载文件失败");
                }
              },
              fail: function (err) {
                console.log("下载文件失败", err);
              },
            });
          }
        }
      }
    },

    onClose() {
      this.showPopup = false;
    },
    back() {
      uni.navigateBack();
    },
  },
};
</script>

<style scoped lang="scss">
/deep/ .van-popup--bottom.van-popup--safe {
  background: linear-gradient(
    -120deg,
    #ffffff 0%,
    #ffffff 30%,
    #d1f7f3 40%,
    #d1f7f3 70%,
    #ffffff 100%
  );
}

.container {
  width: 100%;
  min-height: 100vh;
  background: transparent;
  padding: 70rpx 32rpx 0;
  box-sizing: border-box;
}
.bg_color_white {
  background: white;
}
.content {
  width: 100%;
  .content_title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333333;
  }
  .part_description {
    font-size: 28rpx;
    font-weight: 400;
    color: #666666;
    width: 100%;
    margin-top: 32rpx;
  }
}
.step_item {
  width: 100%;
  padding: 32rpx 18rpx;
  box-sizing: border-box;
}
.steps {
  font-size: 28rpx;
  font-weight: 400;
  color: #666666;
}
.step_title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
  margin: 40rpx 0 48rpx;
}
.courseware_list {
  width: 100%;
}
.courseware_list_item {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 48rpx;
}
.pdf_img {
  width: 64rpx;
  height: 64rpx;
}
.pdf_name {
  width: 600rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
  margin-left: 32rpx;
}
.arrow_up {
  width: 40rpx;
  height: 20rpx;
}
.color_green {
  color: #ff4d03;
}
.color_little {
  position: absolute;
  top: -8rpx;
  color: #bfe7dd;
}
.btn_bottom {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fixed {
  width: 100%;
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: env(safe-area-inset-bottom);
  left: 0;
}
.btn_text {
  font-size: 28rpx;
  font-weight: 400;
  color: #ff4d03;
}
.asked {
  position: fixed;
  right: 32rpx;
  bottom: 18%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  width: 120rpx;
  height: 120rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(0, 74, 88, 0.1),
    0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.08);
  z-index: 3;
}
.asked_text {
  font-size: 24rpx;
  font-weight: 400;
  color: #ff4d03;
}
.comment_circle {
  margin-top: 4rpx;
  font-size: 46rpx;
  color: #ff4d03;
}
.popup_content {
  width: 100%;
  height: 100%;
  padding: 40rpx 56rpx 0;
  box-sizing: border-box;
}
.flex_bt {
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
}
.btn_center {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 152rpx;
  display: flex;
  justify-content: center;
}
.bg_color {
  background: linear-gradient(
    -120deg,
    #ffffff 0%,
    #ffffff 30%,
    #d1f7f3 40%,
    #d1f7f3 70%,
    #ffffff 100%
  );
}
.btn_close {
  width: 80rpx;
  height: 80rpx;
  margin-top: 32rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: rgba(40, 178, 139, 0.07);
  box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(0, 75, 88, 0.1),
    0rpx 0rpx 10rpx 0rpx rgba(0, 66, 41, 0.08);
}
.cross {
  font-size: 40rpx;
  color: #ff4d03;
}
.content_item {
  width: 304rpx;
  height: 144rpx;
  border-radius: 16rpx;
  font-size: 32rpx;
  font-weight: 800;
  padding: 28rpx;
  box-sizing: border-box;
}
.bg_purple {
  background: url("https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/bg1.png");
  background-size: cover;
  color: #4159a4;
}
.bg_blue {
  background: url("https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/bg2.png");
  background-size: cover;
  color: #995538;
}
.bg_blue_dark {
  background: url("https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/bg4.png");
  background-size: cover;
  color: #366d81;
}
.bg_brown {
  background: url("https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/bg3.png");
  background-size: cover;
  color: #345c89;
}
.content_item:nth-child(n + 3) {
  margin-top: 32rpx;
}
</style>
